<template>
  <div>
    <div class="car">
      <div class="shop-car">
        <i class='iconfont icon-shopping_cart' :class="{whiteCar:numShow}">
          <span v-if='numShow' class='num'>{{allNum}}</span>
        </i>
        <span :class="{white:numShow}">
          <i>￥</i><i>{{ti}}</i>
         
              </span>
      </div>
      <div class="middle">
        另需配送费￥4元
      </div>
      <div class="right-money" ref='qisong' @click='buy'>
        ￥20元起送
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: ['ti', 'allNum'],
    data() {
      return {
        numShow: false,
        
      }
    },
    // 更改数据是调用
    beforeUpdate () {
      this.numShow = this.allNum > 0 ? true : false
      // console.log(this.$refs.qisong)
      if(this.ti>=20) {
        this.$refs.qisong.innerHTML = '去结算'
        this.$refs.qisong.style.background = '#00b43c'  
        this.$refs.qisong.style.color='#fff'
      }else if(this.ti <= 0) {
        this.$refs.qisong.innerHTML='￥20元起送'
        this.$refs.qisong.style.background='#2b333b'
        this.$refs.qisong.style.color='#80858a'
      }
      else{
        this.$refs.qisong.innerHTML ='还差￥'+(20-this.ti)+'元起送'
        this.$refs.qisong.style.background = '#2b333b'
        this.$refs.qisong.style.color='#80858a'
      }
     
    },
    methods:{
      buy(){
         if(this.ti<20) return;
          alert('支付'+this.ti+'元')
      }
    }
  }

</script>
<style scoped>

  .white{
   color: #fff;
  }
  .car {
    width: 100%;
    height: 50px;
    background: #141d27;
    position: fixed;
    color: #80858a;
    /*color:#fff;*/
  }
  
  .car .shop-car {
    float: left;
    padding-right: 20px;
  }
  
  .icon-shopping_cart {
    text-align: center;
    line-height: 50px;
    position: relative;
    font-size: 30px;
    border-radius: 50%;
    background: #2b343c;
    
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 8px solid #141d27;
    margin: -15px 0 0 15px;
  }
  
  .icon-shopping_cart .num {
    position: absolute;
    left: 30px;
    top: -7px;
    color: #fff;
    width: 25px;
    height: 20px;
    line-height: 20px;
    border-radius: 5px;
    background: #f01414;
    font-size: 12px;
    font-weight: 900;
  }
  
  .car span i {
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
  }
  
  .car .middle {
    border-left: 1px solid #80858a;
    padding-left: 20px;
    float: left;
    line-height: 30px;
    margin-top: 10px;
    height: 30px;
    font-size: 10px;
  }
  
  .car .right-money {
    float: right;
    background: #2b333b;
    height: 100%;
    line-height: 50px;
    font-weight: 900;
    font-size: 14px;
    padding: 0 20px 0 20px;
  }
  .whiteCar {
    color: #fff;
     background: #00a0dc;
  }
</style>
